<template>
  <div class="max">
    <my-header :backBtn="true"></my-header>
    <div class="weui-cell">
      <div class="weui-cell__hd tl"><label class="weui-label">日期</label></div>
      <div class="weui-cell__bd">
        <input class="weui-input" @change="queryFn" v-model="params.day" type="date" style="font-size: 1.6rem;"/>
      </div>
    </div>
    <div class="weui-cell weui-cell_select weui-cell_select-after">
      <div class="weui-cell__hd">
        <label class="weui-label tl">班级</label>
      </div>
      <div class="weui-cell__bd">
        <select class="weui-select" @change="queryFn" v-model="params.clazzId">
          <option :value="item.id" v-for="item in clazzList">{{item.gradeName}}-{{item.name}}</option>
        </select>
      </div>
    </div>
    <div class="cont">
      <div class="weui-panel tl">
        <div class="weui-panel__bd">
          <div class="weui-loadmore weui-loadmore_line" v-if="list.length===0">
            <span class="weui-loadmore__tips">暂无数据</span>
          </div>
          <div class="weui-panel">
            <div class="weui-panel__bd">
              <div class="weui-media-box weui-media-box_appmsg" v-for="item in list">
                <div class="weui-media-box__hd" @click="check(item.studentAvatar)">
                  <img class="weui-media-box__thumb" :src="item.studentAvatar">
                </div>
                <div class="weui-media-box__bd">
                  <h4 class="weui-media-box__title">{{item.studentName}}</h4>
                  <ul class="weui-media-box__info">
                    <li class="weui-media-box__info__meta">{{item.clazzName}}</li>
                    <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">{{item.signTime}}</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <a href="javascript:void(0);" class="weui-cell weui-cell_link" v-if="params.pages>params.current">
          <div class="weui-cell__bd" @click="loadmore">查看更多</div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
  import wx from "weixin-js-sdk";

  export default {
    components: {},
    data() {
      let time = this.$getNowDate('date');
      return {
        params: {
          clazzId: '',
          current: 1,
          size: 10,
          pages: 0,
          direction: 1,
          day: time,
        },
        list: [],
        clazzList: []
      }
    },
    methods: {
      loadmore() {
        this.params.size += 10;
        this.queryFn();
      },
      saveR() {
        this.$saveR(this.selectForm)
      },
      queryFn() {
        this.$http.fetchStudentRecord(this.params).then(resp => {
          let data = resp.data;
          this.list = data.records;
          this.params.current = data.current;
          this.params.size = data.size;
          this.params.pages = data.pages;
        })
      },
      check(url) {
        if (!url) {
          return;
        }
        wx.previewImage({
          previewImage: url,
          urls: [url]
        })
      },
      getWxConfig() {
        let url = window.location.href;

        let _this = this;
        _this.$http.fetchWxConfig({
          url: url
        }).then(resp => {
          wx.config({
            // debug: true,
            appId: resp.data.appId,
            timestamp: resp.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: resp.data.noncestr, // 必填，生成签名的随机串
            signature: resp.data.sign, // 必填，签名
            jsApiList: ['previewImage'] // 必填，需要使用的JS接口列表
          });
        })
      },
      fetchClazzList() {
        this.$http.fetchClazzList().then(resp => {
          let clazzList = resp.data;
          this.clazzList = clazzList;
          if (clazzList.length === 1) {
            this.params.clazzId = clazzList[0].id;
          }
          this.queryFn();
        })
      }
    },
    created() {

    },
    mounted() {
      this.fetchClazzList();
      this.getWxConfig();
    }

  }
</script>

<style scoped>
  .attendCount {
    padding: 1rem;
    box-sizing: border-box;
  }

  .select-rasult {
    padding: 1rem 0;
    color: #B2B2B2;
  }

  .attendCount-table {
    height: calc(100% - 7.5rem);
    width: 100%;
    overflow: auto;
  }

  .count-table thead {
    background: #D9D9D9;
    padding: 0.5rem 0;
  }

  .count-table td {
    padding: 0.5rem 0;
  }

  .count-table tr {
    border-bottom: 1px solid #D9D9D9;
  }

  .attendType {
    width: calc(100% - 8rem);
    margin-bottom: 1rem;
    flex-wrap: wrap;
  }

  .attendType span {
    font-size: 1.4rem;
    margin: 0 0.2rem;
    padding: 0.1rem 0.5rem;
    border-radius: 5px;
  }

  .attendType span.active {
    background: #2aa7e1;
    color: #fff;
  }
</style>
